<template>
    <div class="container-left">
        <el-row class="row-bg" :gutter="20">
            <el-col  :span="8" :xs="24" style="margin-top: 10px">
                <el-card shadow="always">
                    <gateway :deviceGateWay="deviceData.gateway"></gateway>
                </el-card>
            </el-col>
            <el-col :span="8" :xs="24" style="margin-top: 10px">
                <el-card shadow="always">
                    <information :deviceSensor="deviceData.sensor"></information>
                </el-card>
            </el-col>
            <el-col :span="8" :xs="24" style="margin-top: 10px">
                <el-card shadow="always">
                    <loop :device-loop="deviceData.loop"></loop>
                </el-card>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
            <el-col>
                <Map></Map>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import Gateway from '@/views/home/left/top/gateway.vue'
import information from '@/views/home/left/top/information.vue'
import loop from '@/views/home/left/top/loop.vue'
import Map from '@/views/home/left/bottom/map.vue'
import {devicePreview} from '@/api/home/homeData'

export default {
    name: 'left',
    components: { Map, Gateway,information,loop },
    data(){
        return{
            deviceData:{
                loop:{},
                sensor:{},
                gateway:{}
            }
        }
    },
    created() {
        this.getDevicePreview()
    },
    methods:{
        // 首页预览数据
        getDevicePreview(){
            devicePreview().then(res=>{
                console.log(res)
                this.deviceData = res.data
            })
        }
    }
}
</script>

<style scoped lang="scss">
.container-left {

}
</style>
